<template>
	<view class="present-componets-box">
		<view class="present-mask"></view>
		<view class="present-box" :class="styleClass">
			<img :src="bgImg" class="present-top">
			<img :src="titleImg" class="present-title">
			<view class="present-bottom" :style="btnBg" @click="receive">立即领取</view>
			<uni-icons type="close" size="30" class="present-close" color="#fff" @click="closeShow"></uni-icons>
			<view class="present-box-content">
				<view class="scroll-box">
					<ul class="present-list" v-if="isShow(1)">
						<li class="item" :style="presentBg" v-for="item in couponList" :key="item.id">
							<view class="num-tips"> x{{ item.num }}张 </view>
							<view class="item-left" v-if="item.type == 1">
								<span class="unit">￥</span>
								<span class="price">{{ parseFloat(item.amount) }}</span>
							</view>
							<view class="item-left" v-if="item.type == 2">
								<span class="price">{{ item.discount * 10 }}</span>
								<span class="unit">折</span>
							</view>
							<view class="item-right">
								<view class="title">{{ item.name }}</view>
								<view class="desc" v-if="item.type == 1">
									<span v-if="item.is_threshold == 1">满{{ item.threshold_amount }}减{{ item.amount }}</span>
									<span v-if="item.is_threshold == 2">无门槛</span>
								</view>
								<view class="desc" v-if="item.type == 2">
									<span v-if="item.is_threshold == 1">满{{ item.threshold_amount }}可用</span>
									<span v-if="item.is_threshold == 2">无门槛</span>
								</view>
							</view>
						</li>
					</ul>

					<view class="other" v-if="isShow(2) || isShow(3)">
						<view class="item" :style="presentBg2" v-if="isShow(2)">
							<view class="item-left">
								<span class="price"> {{ integral }} </span>
								<span class="unit"></span>
							</view>
							<view class="item-right">
								<view class="title"> 消费奖励积分 </view>
							</view>
						</view>
						<view class="item" :style="presentBg2" v-if="isShow(3)">
							<view class="item-left">
								<span class="price"> {{ balance }} </span>
								<span class="unit"></span>
							</view>
							<view class="item-right">
								<view class="title"> 消费奖励余额 </view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app';
	
	export default {
		name: "present",
		props: {
			// 奖励优惠券
			couponList: {
				type: Array,
				default () {
					return []
				}
			},
			// 奖励余额
			balance: {
				type: Number,
				default () {
					return 0
				}
			},
			// 奖励积分
			integral: {
				type: Number,
				default () {
					return 0
				}
			},
			// 样式
			styleData: {
				type: Number,
				default () {
					return 1
				}
			},
			// 奖励类型
			awardType: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				domain: BASE_URL,
				styleClass: 'present-style-1',
				btnBg: '',
				presentBg: '',
				presentBg2: '',
				bgImg: '',
				titleImg: ''
			}
		},
		mounted () {
			this.styleClass = 'present-style-' + this.styleData
			this.btnBg = 'background-image: url(' + this.domain + '/static/admin/default/image/present/btn_' + this.styleData + '.png)'
			this.presentBg = 'background-image: url(' + this.domain + '/static/admin/default/image/present/coupon_' + this.styleData + '.png)'
			this.presentBg2 = 'background-image: url(' + this.domain + '/static/admin/default/image/present/card_' + this.styleData + '.png)'
			this.bgImg = this.domain + '/static/admin/default/image/present/bg_' + this.styleData + '.png'
			this.titleImg = this.domain + '/static/admin/default/image/present/title_' + this.styleData + '.png'
		},
		methods: {
			// 奖励是否显示
			isShow(type) {
				if (this.awardType.indexOf(type) == -1) {
					return false
				} else {
					return true
				}
			},
			// 关闭
			closeShow() {
				this.$emit('close')
			},
			// 领取
			receive() {
				this.$emit('receive')
			}
		}
	}
</script>

<style scoped lang="scss">
	.present-mask {
		height: 100%;
		width: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 100;
		top: 0px;
	}
	.present-box {
		position: fixed;
		width: 640rpx;
		height: 1024rpx;
		background-size: cover;
		top: 128rpx;
		z-index: 999;
		margin-left: 60rpx;
	}
	.present-top {
		position: absolute;
		width: 752rpx;
		top: 50%;
		transform: translateY(-50%);
		left: -54rpx;
		background-size: cover;
	}
	.present-title {
		position: absolute;
		height: 66rpx;
		top: 250rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.present-bottom {
		position: absolute;
		width: 560rpx;
		height: 176rpx;
		top: 776rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999999;
		background-position: center;
		background-size: cover;
		padding-top: 80rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
	}
	.present-close {
		position: absolute;
		top: 990rpx;
		left: 45%;
		font-size: 76rpx;
		color: white;
		z-index: 999999;
		background-size: cover;
	}
	.present-box-content {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 480rpx;
		overflow: auto;
		top: 364rpx;
		height: 580rpx;
		padding-bottom: 208rpx;
	}
	.scroll-box {
		width: 100%;
		height: 460rpx;
		overflow: scroll;
	}
	.present-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.present-box-content .item {
		position: relative;
		height: 140rpx;
		border-radius: 16rpx;
		display: flex;
		overflow: hidden;
		margin-bottom: 16rpx !important;
		background-position: center;
		background-size: 100% 100%;
	}
	.present-list .item .num-tips {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-flex;
		padding: 2rpx 16rpx;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx 0 20rpx 0;
		background: #e93323;
		color: #FFF;
		font-size: 24rpx;
		line-height: 36rpx;
		height: 40rpx;
		z-index: 6;
	}
	.item .item-left {
		display: flex;
		justify-content: center;
		width: 170rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
	}
	.item-left .unit {
		font-size: 24rpx;
		line-height: 144rpx;
		color: #ff3c29;
		transform: translateY(6rpx);
	}
	.item-left .price {
		padding-left: 8rpx;
		padding-right: 8rpx;
		font-weight: bold;
		font-size: 38rpx;
		line-height: 152rpx;
		color: #ff3c29;
	}
	.item .item-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 28rpx;
	}
	.item-right .title {
		width: 220rpx;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 44rpx;
		color: #212121;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.item-right .desc {
		width: 220rpx;
		margin-top: 4rpx;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		color: #969696;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.edit-box {
		background: #fff;
		margin-left: 100rpx;
		padding: 60rpx;
		border-radius: 40rpx;
	}
	.other {
		border-radius: 16rpx;
	}
	.present-style-2 .present-title {
		height: 72rpx;
		top: 172rpx;
		left: 240rpx;
	}
	.present-style-2 .present-bottom {
		width: 560rpx;
		height: 158rpx;
		top: 744rpx;
		backdrop-filter: blur(4rpx);
		border-radius: 42rpx;
		padding-top: 56rpx;
		color: #432C09;
	}
	.present-style-3 .present-title {
		height: 62rpx;
		top: 112rpx;
	}
	.style-2 .present-box-content {
		top: 300rpx;
		padding-bottom: 192rpx;
		width: 500rpx;
		height: 600rpx;
	}
	.present-style-3 .present-box-content {
		top: 232rpx;
		padding-bottom: 212rpx;
		width: 550rpx;
		height: 668rpx;
	}
	.present-style-3 .present-bottom {
		width: 630rpx;
		height: 180rpx;
		top: 716rpx;
		backdrop-filter: blur(4rpx);
		border-radius: 48rpx;
		padding-top: 68rpx;
	}
</style>